<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Triangle Puzzle</title>  
<style>  
  .triangle {  
    width: 100px;  
    height: 100px;  
    position: absolute;  
    cursor: pointer;  
  }  
  canvas {  
    border: 1px solid black;  
    background-color: #f4f4f4;  
  }  
  #triangle1, #triangle2 {  
    position: absolute;  
  }  
  #formula {  
    margin-top: 200px;  
  }   
</style>  
</head>  
<body>  
  
    <canvas id="triangle1" width="100" height="100"></canvas>  
    <canvas id="triangle2" width="100" height="100" style="left: 200px; top: 100px;"></canvas>
  
<input type="text" id="formula" readonly>  
<button onclick="validateFormula()">检验</button>  
  
<script >
    function drawTriangle(canvasId, angle1, angle2) {  
  const canvas = document.getElementById(canvasId);  
  const ctx = canvas.getContext('2d');  
  
  const centerX = canvas.width / 2;  
  const centerY = canvas.height / 2;  
  const sideLength = 50; // 假设三角形边长是50  
  
  // 清除画布  
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  
  // 保存当前状态  
  ctx.save();  
  
  // 移动到中心点  
  ctx.translate(centerX, centerY);  
  
  // 旋转画布  
  ctx.rotate(angle1 * Math.PI / 180);  
  
  // 绘制三角形  
  ctx.beginPath();  
  ctx.moveTo(0, 0);  
  ctx.lineTo(sideLength, 0);  
  ctx.lineTo(sideLength / 2, sideLength * Math.sqrt(3) / 2);  
  ctx.closePath();  
  ctx.stroke();  
  
  // 恢复画布状态  
  ctx.restore();  
  
  // 绘制第二个三角形（如果需要的话）  
//   if (angle2) {  
//     ctx.save();  
//     ctx.translate(centerX, centerY);  
//     ctx.rotate(angle2 * Math.PI / 180);  
//     ctx.beginPath();  
//     ctx.moveTo(0, 0);  
//     ctx.lineTo(sideLength, 0);  
//     ctx.lineTo(sideLength, sideLength);  
//     ctx.closePath();  
//     ctx.stroke();  
//     ctx.restore();  
//   }  
}  
  
// 绘制30°-60°-90°三角形  
drawTriangle('triangle1', 30, null);  
  
// 绘制45°-45°-90°三角形  
drawTriangle('triangle2', 0, 45);  
    const triangle1 = document.getElementById('triangle1');  
const triangle2 = document.getElementById('triangle2');  
const formulaInput = document.getElementById('formula');  
  
let isDragging1 = false;  
let isDragging2 = false;  
let startX1, startY1, startX2, startY2;  
  
triangle1.addEventListener('mousedown', (e) => {  
  isDragging1 = true;  
  startX1 = e.clientX - triangle1.getBoundingClientRect().left;  
  startY1 = e.clientY - triangle1.getBoundingClientRect().top;  
});  
  
triangle2.addEventListener('mousedown', (e) => {  
  isDragging2 = true;  
  startX2 = e.clientX - triangle2.getBoundingClientRect().left;  
  startY2 = e.clientY - triangle2.getBoundingClientRect().top;  
});  
  
document.addEventListener('mousemove', (e) => {  
  if (isDragging1) {  
    const x = e.clientX - startX1;  
    const y = e.clientY - startY1;  
    triangle1.style.transform = `translate(${x}px, ${y}px) rotate(${getRotationDegree(x, y)}deg)`;  
  }  
  if (isDragging2) {  
    const x = e.clientX - startX2;  
    const y = e.clientY - startY2;  
    triangle2.style.transform = `translate(${x}px, ${y}px) rotate(${getRotationDegree(x, y)}deg)`;  
  }  
});  
  
document.addEventListener('mouseup', () => {  
  isDragging1 = false;  
  isDragging2 = false;  
});  
  
function getRotationDegree(x, y) {  
  const angle = Math.atan2(y, x) * (180 / Math.PI);  
  return angle < 0 ? 360 + angle : angle;  
}  
  
function validateFormula() {  
  const triangle1Angle = triangle1.style.transform.match(/rotate\((.*?)\)deg/)[1];  
  const triangle2Angle = triangle2.style.transform.match(/rotate\((.*?)\)deg/)[1];  
  const totalAngle = parseInt(triangle1Angle) + parseInt(triangle2Angle);  
  formulaInput.value = `${triangle1Angle}° + ${triangle2Angle}° = ${totalAngle}°`;  
  // 在这里你可以添加额外的逻辑来与后端通信，验证算式的正确性  
}  
  
// 对于点击生成算式和吸附功能，你可能需要添加更多的事件监听和逻辑处理  
// 这里只是展示了如何获取三角形的角度并相加显示到输入框中
</script>  
</body>  
</html>